<template>
	<view class="create">
		<view style="width: 100%;height: 20upx;background: #ECECEC;"></view>
		<view class="create-content">
			<view class="createNane">
				<view><text>联系人</text><input type="text" placeholder='收货人名字' v-model="consignee" /></view>
			</view>
			<view class="createNane">
				<view><text>手机号</text><input type="text" placeholder='收货人手机号码' v-model="phone" /></view>
			</view>
			<view class="createNane">
				<view style="position: relative;">
					<text>城市</text>
					<text class="createName">{{name}}</text>
					<image type="primary" @tap="openLevel" src="../../static/images/address-icon.png" mode=""></image>
				</view>
			</view>
			<view class="createNane" style="border: 0px;">
				<view><text>详细</text><input type="text" placeholder='街道 楼号 门牌' v-model="address" /></view>
			</view>
			<view style="width: 100%;height: 20upx;background: #ECECEC;"></view>
			<view class="createNane" style="border: 0px;">
				<view><text>默认地址</text></view>
				<view class="uni-list" style="margin-left: 400upx;">
					<view class="uni-list-cell uni-list-cell-pd">
						<switch @change="switch1Change" v-model="defaultAddress"/>
					</view>
				</view>
			</view>
		</view>
		<view class="site">
			<button type="primary" @tap="openLevel"></button>
			<!-- <text>{{pickerText}}</text> -->
			<level-linkage ref="levelLinkage" :pickerValueDefault="pickerValueDefault" :allData="treeData" @onConfirm="onConfirm"
			 themeColor='#007AFF'></level-linkage>
		</view>
		<view class="confirm-btns" @click="creates()">
			<text> 提交 </text>
		</view>

	</view>
</template>

<script>
	import levelLinkage from "@/components/three-level-linkage/linkage.nvue"
	export default {
		data() {
			return {
				def:0,
                // def: false
				Token: "",
				province: '', //省份
				city: '', //城市
				county: '', //区县
				address: '', //详细地址
				defaultAddress:'', //默认地址
				phone: '', //电话
				consignee: '', //收件人
				
				name: '',
				pickerValueDefault: [0, 0, 0],
				pickerText: [],
				treeData: [{
					"id": "1",
					"name": "北京",
					"code": "11",
					"children": [{
						"id": "1230040276324601858",
						"name": "北京大学",
						"code": "10001",
						"children": [{
							"id": "1219144373145477122",
							"name": "风景园林",
							"code": "fengjingyuanlin"
						}]
					}]
				}, {
					"id": "2",
					"name": "湖南",
					"code": "11",
					"children": [{
						"id": "1230040276324601858",
						"name": "郴州",
						"code": "10001",
						"children": [{
								"id": "1219144373145477122",
								"name": "嘉禾",
								"code": "fengjingyuanlin"
							},
							{
								"id": "1219144373145477122",
								"name": "临武",
								"code": "fengjingyuanlin"
							}
						]
					}]
				}]
			}

		},
		components: {
			levelLinkage
		},
		onLoad() {
			this.Token = uni.getStorageSync('Token')
			console.log(this.Token)
		},
		methods: {
			 switch1Change(e) {
			         if(e.target.value==false){
						 this.defaultAddress=0
					 }else{
						  this.defaultAddress=1
					 }
			        },
			creates() {
				var Token = this.Token
				var province = this.province
				var city = this.city
				var county = this.county
				var address = this.address
				var defaultAddress = this.defaultAddress
				var phone = this.phone
				var consignee = this.consignee
				uni.request({
					url: this.$C.webUrl+`m.api?_gp=address&_mt=addAddress&province=${province}&city=${province}&county=${county}&address=${address}&defaultAddress=${defaultAddress}&phone=${phone}&consignee=${consignee}`, //仅为示例，并非真实接口地址。
					header: {
						'accessToken': Token //自定义请求头信息
					},
					success: (res) => {
						console.log(res.data.errmsg)
						if(res.data.errmsg=='成功'){
							uni.navigateTo({
								url: '../list/index'
							});
							uni.showToast({
							    title: '添加成功',
							    duration: 2000
							});
						}
					}
				})
			},
			openLevel() {
				this.$refs.levelLinkage.open();
			},
			onConfirm(e) {
				console.log(e)
				this.province = e.firstPick.name
				this.city = e.secondPick.name
				this.county = e.thirdPick.name
				console.log(this.province)
				this.name = e.name
				// e 确认后选中的数据
				this.pickerText = JSON.stringify(e)
			}

		}
	}
</script>
<style>
	.create {
		width: 100%;
		height: 99.9%;
		background: #ECECEC;
	}

	.create-content {
		width: 100%;
		height: 500upx;
		background: #FFFFFF;
	}

	.createNane {
		width: 100%;
		height: 100upx;
		border-bottom: 1px solid #ECECEC;
		display: flex;
	}

	.createNane view {
		line-height: 100upx;
	}

	.createNane text {
		margin: 0px 30upx;
		font-size: 35upx;
	}

	.createNane input {
		line-height: 100upx;
		vertical-align: middle;
		display: inline-block;
	}

	.createNane image {
		width: 40upx;
		height: 40upx;
		position: absolute;
		left: 620upx;
		top: 30upx;
		vertical-align: middle;
		display: inline-block;
		/* margin-left: 200upx; */
	}

	.createName {
		width: 500upx;
		height: 100upx;
	}

	.confirm-btns {
		width: 320px;
		height: 38px;
		line-height: 38px;
		border-radius: 50px;
		margin-top: 35px;
		background: #fa436a;
		color: #fff;
		font-size: 16px;
		text-align: center;
		display: flex;
		justify-content: center;
		position: fixed;
		bottom: 500upx;
		left: 50upx;
	}
</style>
